<!--
  The Pannel on right side (Desktop views)
-->

<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">

  <div class="access">

  {% include update-list.html %}

  {% if update_list.size > 0 %}

    <div id="access-lastmod" class="post">
      <span>{{- site.data.locales[site.lang].panel.lastmod | default: 'Recent Update' -}}</span>
      <ul class="post-content pl-0 pb-1 ml-1 mt-2">

      {% for item in update_list %}
        {% assign index = item | split: "::" | last | plus: 0 %}
        {% assign post = site.posts[index] %}
        {% assign url = post.url | relative_url %}
        <li><a href="{{ url }}">{{ post.title }}</a></li>
      {% endfor %}

      </ul>
    </div> <!-- #access-lastmod -->

  {% endif %}

  {% include trending-tags.html %}

  {% if trending_tags.size > 0 %}
    <div id="access-tags">
      <span>{{- site.data.locales[site.lang].panel.trending_tags | default: 'Trending Tags' -}}</span>
      <div class="d-flex flex-wrap mt-3 mb-1 mr-3">

      {% for tag_name in trending_tags %}
        {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
        <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
      {% endfor %}

      </div>
    </div>
  {% endif %}
  </div> <!-- .access -->

  {% if include.toc %}
    <!-- BS-toc.js will be loaded at medium priority -->
    <script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
    <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
      <span class="pl-3 pt-2 mb-2">
      {{- site.data.locales[site.lang].panel.toc | default: 'Contents' -}}
      </span>
      <nav id="toc" data-toggle="toc"></nav>
    </div>
  {% endif %}

</div> <!-- #panel-wrapper -->
